<template>
  <view class="swiper-page">
    <common-scroll-view :loading="loading" :pageNum="pageNum" :pageSize="pageSize" :total="total" :data="dataList"
      @onRefresh="onRefreshBack" @getMore="getMore" :showList="!(!loading && !dataList?.length)">
      <view v-for="item in dataList" :key="item.id" style="padding-left: 30rpx; padding-right: 30rpx;">
        <common-product-item :item="item"  :isLogin="isLogin" @showLoginModal="showLoginModal=true"></common-product-item>
      </view>
    </common-scroll-view>
     <common-to-login-modal :show="showLoginModal" @cancel="showLoginModal=false"></common-to-login-modal>
  </view>
</template>

<script>
import { getGoodsByName } from '@/services/product'
export default {
  props: {
    name: {
      type: String,
      default: () => '',
    },
    isLogin: {
      type: Boolean,
      default: () => false,
    }
  },
  data() {
    return {
      dataList: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      loading: false,
      timer: 0,
      showLoginModal: false,
    }
  },
  watch: {
    name(v) {
      if (v) {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          this.loadData();
        }, 300)
      } else {
        this.dataList = [];
        this.pageNum = 1;
      }
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer);
    }
  },
  methods: {
    async getListAction(num) {
      if (this.loading || !this.name) return;
      const _that = this;
      this.loading = true;
      const res = await getGoodsByName({
        pageSize: this.pageSize,
        pageNum: num,
        name: this.name,
      })
      this.loading = false;
      if (res.success) {
        const records = res?.data || [];
        console.log('getGoodsByName', res)
        _that.pageNum = num;
        _that.total = records.length;
        let list = [...records];
        if (num === 1) {
          _that.dataList = list;
        } else {
          _that.dataList = _that.dataList.concat(list);
        }
      }
    },
    async onRefreshBack(callback) {
      await this.getListAction(1);
      callback();
    },
    getMore() {
      this.getListAction(this.pageNum + 1);
    },
    async loadData() {
      await this.getListAction(1);
    },
    clear() {
      // 释放数据时被调用，参考 swiper-list 缓存配置
      this.dataList.length = 0;
    },
    goOrderDetail(id) {
      uni.navigateTo({
        url: `/pages/productDetail/index?id=${id}`,
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.content {
  margin: 0 30rpx;
  width: calc(100% - 60rpx);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.swiper-view {
  flex: 1;
  height: 290rpx;
  padding: 0 30rpx;
}

.swiper-item {
  height: 100%;
  width: 100%;
}

.swiper-image {
  height: 100%;
  width: 100%;
}

.productItem {
  background-color: #F4F6F9;
  border-radius: 24rpx;
  width: calc((100% - 30rpx) / 2);
  min-height: 440rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.contentItem {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.productImg {
  height: calc((100vw - 90rpx) / 2);
  width: calc((100vw - 90rpx) / 2);
  border-radius: 24rpx;
}

.emptyWrap {
  width: 100%;
  flex: 1;
  justify-content: center;
  margin-top: 80rpx;
}
.swiper-page {
  height: calc(100% - 104rpx);
  width: 100vw;
}
.bottomBtn {
  width: 88rpx;
  margin-left: calc((100% - 148rpx) / 2);
}
</style>